<template>
  <div class="product">
    <Bread :breadArr='breadArr'/>
    <div class="text" v-show="!!content" v-html="content"></div>
    <div class="productList text" v-show="!content">
      <li v-for="(item, index) in currentProductList" :key='index' @click="renderInfo(index)">
        <img :src='item.src'/>
        <div>{{'['+item.title+']'}}</div>
      </li>
    </div>
  </div>
</template>

<script>
import Bread from '@/components/Bread'
var productList = [
  [
    {title: '加压式密炼机', src: require('@/assets/images/pro.jpg'), content: '11本公司座于中国品牌之都(晋江),靠近泉州晋江机场。自公司创建以来，几经商海搏击，冲破市场重重阻力，取得不断 的发展。公司十分注重产品质量与科技创新，并聘请高级工程师及技术员数名，拥有雄厚的技术力量，是一家专业研制橡胶 塑料机械企业，特别（强力加压翻转式密炼机）赢得用户的广泛赞誉和信赖，公司严格按照ISO9001:2000国际标准建立实施 的持续改进管理体系，在市场竞争中更好的满足顾客当前和未来的需求和期望。宏圣将一如既往地格守"坚持科技创新、推行 名牌战略、提供优质产品、实施一流服务"的方针和承诺。欢迎各界友人光临惠顾，真诚合作，共创辉煌。'},
    {title: '加压式密炼机', src: require('@/assets/images/pro.jpg'), content: '21本公司座于中国品牌之都(晋江),靠近泉州晋江机场。自公司创建以来，几经商海搏击，冲破市场重重阻力，取得不断 的发展。公司十分注重产品质量与科技创新，并聘请高级工程师及技术员数名，拥有雄厚的技术力量，是一家专业研制橡胶 塑料机械企业，特别（强力加压翻转式密炼机）赢得用户的广泛赞誉和信赖，公司严格按照ISO9001:2000国际标准建立实施 的持续改进管理体系，在市场竞争中更好的满足顾客当前和未来的需求和期望。宏圣将一如既往地格守"坚持科技创新、推行 名牌战略、提供优质产品、实施一流服务"的方针和承诺。欢迎各界友人光临惠顾，真诚合作，共创辉煌。'}
  ],
  [
    {title: '下落料式密炼机', src: require('@/assets/images/pro.jpg'), content: '21本公司座于中国品牌之都(晋江),靠近泉州晋江机场。自公司创建以来，几经商海搏击，冲破市场重重阻力，取得不断 的发展。公司十分注重产品质量与科技创新，并聘请高级工程师及技术员数名，拥有雄厚的技术力量，是一家专业研制橡胶 塑料机械企业，特别（强力加压翻转式密炼机）赢得用户的广泛赞誉和信赖，公司严格按照ISO9001:2000国际标准建立实施 的持续改进管理体系，在市场竞争中更好的满足顾客当前和未来的需求和期望。宏圣将一如既往地格守"坚持科技创新、推行 名牌战略、提供优质产品、实施一流服务"的方针和承诺。欢迎各界友人光临惠顾，真诚合作，共创辉煌。'},
    {title: '下落料式密炼机', src: require('@/assets/images/pro.jpg'), content: '22本公司座于中国品牌之都(晋江),靠近泉州晋江机场。自公司创建以来，几经商海搏击，冲破市场重重阻力，取得不断 的发展。公司十分注重产品质量与科技创新，并聘请高级工程师及技术员数名，拥有雄厚的技术力量，是一家专业研制橡胶 塑料机械企业，特别（强力加压翻转式密炼机）赢得用户的广泛赞誉和信赖，公司严格按照ISO9001:2000国际标准建立实施 的持续改进管理体系，在市场竞争中更好的满足顾客当前和未来的需求和期望。宏圣将一如既往地格守"坚持科技创新、推行 名牌战略、提供优质产品、实施一流服务"的方针和承诺。欢迎各界友人光临惠顾，真诚合作，共创辉煌。'}
  ],
  [
    {title: '开放式炼塑炼胶机', src: require('@/assets/images/pro.jpg'), content: '21本公司座于中国品牌之都(晋江),靠近泉州晋江机场。自公司创建以来，几经商海搏击，冲破市场重重阻力，取得不断 的发展。公司十分注重产品质量与科技创新，并聘请高级工程师及技术员数名，拥有雄厚的技术力量，是一家专业研制橡胶 塑料机械企业，特别（强力加压翻转式密炼机）赢得用户的广泛赞誉和信赖，公司严格按照ISO9001:2000国际标准建立实施 的持续改进管理体系，在市场竞争中更好的满足顾客当前和未来的需求和期望。宏圣将一如既往地格守"坚持科技创新、推行 名牌战略、提供优质产品、实施一流服务"的方针和承诺。欢迎各界友人光临惠顾，真诚合作，共创辉煌。'},
    {title: '开放式炼塑炼胶机', src: require('@/assets/images/pro.jpg'), content: '22本公司座于中国品牌之都(晋江),靠近泉州晋江机场。自公司创建以来，几经商海搏击，冲破市场重重阻力，取得不断 的发展。公司十分注重产品质量与科技创新，并聘请高级工程师及技术员数名，拥有雄厚的技术力量，是一家专业研制橡胶 塑料机械企业，特别（强力加压翻转式密炼机）赢得用户的广泛赞誉和信赖，公司严格按照ISO9001:2000国际标准建立实施 的持续改进管理体系，在市场竞争中更好的满足顾客当前和未来的需求和期望。宏圣将一如既往地格守"坚持科技创新、推行 名牌战略、提供优质产品、实施一流服务"的方针和承诺。欢迎各界友人光临惠顾，真诚合作，共创辉煌。'}
  ],
  [
    {title: '塑料切片机', src: require('@/assets/images/pro.jpg'), content: '21本公司座于中国品牌之都(晋江),靠近泉州晋江机场。自公司创建以来，几经商海搏击，冲破市场重重阻力，取得不断 的发展。公司十分注重产品质量与科技创新，并聘请高级工程师及技术员数名，拥有雄厚的技术力量，是一家专业研制橡胶 塑料机械企业，特别（强力加压翻转式密炼机）赢得用户的广泛赞誉和信赖，公司严格按照ISO9001:2000国际标准建立实施 的持续改进管理体系，在市场竞争中更好的满足顾客当前和未来的需求和期望。宏圣将一如既往地格守"坚持科技创新、推行 名牌战略、提供优质产品、实施一流服务"的方针和承诺。欢迎各界友人光临惠顾，真诚合作，共创辉煌。'},
    {title: '塑料切片机', src: require('@/assets/images/pro.jpg'), content: '22本公司座于中国品牌之都(晋江),靠近泉州晋江机场。自公司创建以来，几经商海搏击，冲破市场重重阻力，取得不断 的发展。公司十分注重产品质量与科技创新，并聘请高级工程师及技术员数名，拥有雄厚的技术力量，是一家专业研制橡胶 塑料机械企业，特别（强力加压翻转式密炼机）赢得用户的广泛赞誉和信赖，公司严格按照ISO9001:2000国际标准建立实施 的持续改进管理体系，在市场竞争中更好的满足顾客当前和未来的需求和期望。宏圣将一如既往地格守"坚持科技创新、推行 名牌战略、提供优质产品、实施一流服务"的方针和承诺。欢迎各界友人光临惠顾，真诚合作，共创辉煌。'}
  ],
  [
    {title: '冷水式出片机', src: require('@/assets/images/pro.jpg'), content: '21本公司座于中国品牌之都(晋江),靠近泉州晋江机场。自公司创建以来，几经商海搏击，冲破市场重重阻力，取得不断 的发展。公司十分注重产品质量与科技创新，并聘请高级工程师及技术员数名，拥有雄厚的技术力量，是一家专业研制橡胶 塑料机械企业，特别（强力加压翻转式密炼机）赢得用户的广泛赞誉和信赖，公司严格按照ISO9001:2000国际标准建立实施 的持续改进管理体系，在市场竞争中更好的满足顾客当前和未来的需求和期望。宏圣将一如既往地格守"坚持科技创新、推行 名牌战略、提供优质产品、实施一流服务"的方针和承诺。欢迎各界友人光临惠顾，真诚合作，共创辉煌。'},
    {title: '冷水式出片机', src: require('@/assets/images/pro.jpg'), content: '22本公司座于中国品牌之都(晋江),靠近泉州晋江机场。自公司创建以来，几经商海搏击，冲破市场重重阻力，取得不断 的发展。公司十分注重产品质量与科技创新，并聘请高级工程师及技术员数名，拥有雄厚的技术力量，是一家专业研制橡胶 塑料机械企业，特别（强力加压翻转式密炼机）赢得用户的广泛赞誉和信赖，公司严格按照ISO9001:2000国际标准建立实施 的持续改进管理体系，在市场竞争中更好的满足顾客当前和未来的需求和期望。宏圣将一如既往地格守"坚持科技创新、推行 名牌战略、提供优质产品、实施一流服务"的方针和承诺。欢迎各界友人光临惠顾，真诚合作，共创辉煌。'}
  ],
  [
    {title: '开放式炼胶机', src: require('@/assets/images/pro.jpg'), content: '21本公司座于中国品牌之都(晋江),靠近泉州晋江机场。自公司创建以来，几经商海搏击，冲破市场重重阻力，取得不断 的发展。公司十分注重产品质量与科技创新，并聘请高级工程师及技术员数名，拥有雄厚的技术力量，是一家专业研制橡胶 塑料机械企业，特别（强力加压翻转式密炼机）赢得用户的广泛赞誉和信赖，公司严格按照ISO9001:2000国际标准建立实施 的持续改进管理体系，在市场竞争中更好的满足顾客当前和未来的需求和期望。宏圣将一如既往地格守"坚持科技创新、推行 名牌战略、提供优质产品、实施一流服务"的方针和承诺。欢迎各界友人光临惠顾，真诚合作，共创辉煌。'},
    {title: '开放式炼胶机', src: require('@/assets/images/pro.jpg'), content: '22本公司座于中国品牌之都(晋江),靠近泉州晋江机场。自公司创建以来，几经商海搏击，冲破市场重重阻力，取得不断 的发展。公司十分注重产品质量与科技创新，并聘请高级工程师及技术员数名，拥有雄厚的技术力量，是一家专业研制橡胶 塑料机械企业，特别（强力加压翻转式密炼机）赢得用户的广泛赞誉和信赖，公司严格按照ISO9001:2000国际标准建立实施 的持续改进管理体系，在市场竞争中更好的满足顾客当前和未来的需求和期望。宏圣将一如既往地格守"坚持科技创新、推行 名牌战略、提供优质产品、实施一流服务"的方针和承诺。欢迎各界友人光临惠顾，真诚合作，共创辉煌。'}
  ],
  [
    {title: '加电热式接片机', src: require('@/assets/images/pro.jpg'), content: '21本公司座于中国品牌之都(晋江),靠近泉州晋江机场。自公司创建以来，几经商海搏击，冲破市场重重阻力，取得不断 的发展。公司十分注重产品质量与科技创新，并聘请高级工程师及技术员数名，拥有雄厚的技术力量，是一家专业研制橡胶 塑料机械企业，特别（强力加压翻转式密炼机）赢得用户的广泛赞誉和信赖，公司严格按照ISO9001:2000国际标准建立实施 的持续改进管理体系，在市场竞争中更好的满足顾客当前和未来的需求和期望。宏圣将一如既往地格守"坚持科技创新、推行 名牌战略、提供优质产品、实施一流服务"的方针和承诺。欢迎各界友人光临惠顾，真诚合作，共创辉煌。'},
    {title: '加电热式接片机', src: require('@/assets/images/pro.jpg'), content: '22本公司座于中国品牌之都(晋江),靠近泉州晋江机场。自公司创建以来，几经商海搏击，冲破市场重重阻力，取得不断 的发展。公司十分注重产品质量与科技创新，并聘请高级工程师及技术员数名，拥有雄厚的技术力量，是一家专业研制橡胶 塑料机械企业，特别（强力加压翻转式密炼机）赢得用户的广泛赞誉和信赖，公司严格按照ISO9001:2000国际标准建立实施 的持续改进管理体系，在市场竞争中更好的满足顾客当前和未来的需求和期望。宏圣将一如既往地格守"坚持科技创新、推行 名牌战略、提供优质产品、实施一流服务"的方针和承诺。欢迎各界友人光临惠顾，真诚合作，共创辉煌。'}
  ]
]
var productType = [
  // {title: '加压式密炼机'},
  // {title: '下落料式密炼机'},
  // {title: '开放式炼塑炼胶机'},
  // {title: '塑料切片机'},
  // {title: '冷水式出片机'},
  // {title: '开放式炼胶机'},
  // {title: '加电热式接片机'}
]
export default {
  name: 'news',
  components: {
    Bread
  },
  mounted () {
    this.init()
  },
  data () {
    return {
      content: '',
      breadArr: [
        {
          title: '新闻中心',
          to: {path: '/news/news_info', name: 'news_info', params: {id: 0, aid: 1}}
        }
      ],
      currentProductList: []
    }
  },
  methods: {
    init () {
      console.log(1222)
      this.content = ''
      var id = this.$route.params.id
      for (let i = 0; i < productList[id].length; i++) {
        let temp = productList[id][i]
        this.$set(this.currentProductList, i, temp)
      }
      var aid = Number(this.$route.params.aid)
      this.breadArr = [
        {
          title: '新闻中心',
          to: {path: '/product/product_info', name: 'product_info', params: {id: 0, aid: aid === 1 ? 2 : 1}}
        }
      ]
      var tempObj = {
        title: productType[id]['title']
      }
      this.$set(this.breadArr, 1, tempObj)
    },
    renderInfo (index) {
      var id = this.$route.params.id
      var aid = Number(this.$route.params.aid)
      console.log(this.$route.params.aid)
      var tempObj1 = {
        title: productType[id]['title'],
        to: {path: '/product/product_info', name: 'product_info', params: {id, aid: aid === 1 ? 2 : 1}}
      }
      this.$set(this.breadArr, 1, tempObj1)
      this.content = this.currentProductList[index]['content']
      var tempObj2 = {
        title: this.currentProductList[id]['title']
      }
      this.$set(this.breadArr, 2, tempObj2)
    }
  },
  watch: {
    '$route' (to, from) {
      this.init()
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../assets/css/reset.scss";
.product {
  li{
    display: inline-block;
    border: 1px solid #cccccc;
    border-radius: 10px;
    img{
      width: 200px;
    }
    div{
      text-align: center;
    }
    &:hover{
      border: 1px solid #ff0000;
    }
    &+li{
      margin-left: 20px;
    }
  }
  .text{
    padding: 5px;
    line-height: 2;
  }
}
</style>
